<template>
  <el-menu router   :default-openeds="['/message', '/security', '/property', '/life']" >
    <el-sub-menu index="/message">
      <template #title><TongZhi class="main1" style=" height: 20px;width: 20px;margin-right: 15px;"/>消息通知</template>
	   
      <el-menu-item index="/announcement"><TongZhi2 style="height: 20px;width: 20px;margin-right:15px;"/>社区公告</el-menu-item>
	   <el-menu-item index="/chat"><TongZhi2 style="height: 20px;width: 20px;margin-right:15px;"/>社区群聊</el-menu-item>
      </el-sub-menu>
    <el-sub-menu index="/security" >
      <template #title style=" border-radius: 8px 8px 8px 8px;"><AnBao style="margin-right:15px;"/>安保管理</template>
      <el-menu-item index="/visitor"><nj style="margin-right:15px;"/>访客登记</el-menu-item>
      <el-menu-item index="/parking"><che style="height: 18px;width: 18px;margin-right: 15px;"/>车位管理</el-menu-item>
    </el-sub-menu>
   <el-sub-menu index="/property">
      <template #title><WuYe style="margin-right:15px;"/>物业管理</template>
      <el-menu-item index="/maintenance"><BaoShi style="margin-right:15px;"/>报事维修</el-menu-item>
      <el-menu-item index="/complaints"><ShiTou style="margin-right:15px;"/>事项投诉</el-menu-item>
    </el-sub-menu>
<el-sub-menu index="/life">
      <template #title><ShengHuo style="margin-right:15px;"/>生活缴费</template>
      <el-menu-item index="/payment"><JiaoFeiWu style="height: 20px;width: 20px;margin-right: 15px;"/>物业费缴纳</el-menu-item>
      <el-menu-item index="/utilitybills"><Shuidian style="height: 20px;width: 20px;margin-right: 15px;"/>水电费缴纳</el-menu-item>
</el-sub-menu>
  </el-menu>
</template>

<script setup>
	import TongZhi from '../icon/tongzhi'
	import TongZhi2 from '../icon/tongzhi2'
	import AnBao from '../icon/anbao'
	import WuYe from '../icon/wuye'
	import ShengHuo from '../icon/shenghuo'
	import nj from '../icon/dengji'
	import che from '../icon/chewei'
	import BaoShi from '../icon/baoshi'
	import ShiTou from '../icon/shixiangtousu'
	import JiaoFeiWu from '../icon/wuyefeijiaona'
  import Shuidian from '../icon/shuidian'
</script>

<style scoped lang="scss">
	.el-menu-item{
		  background-color: #fff5e9;
		  border-radius: 8px;
		  padding: 30px 0px;
    .el-menu-item.is-active {
      background-color: #f8c27f; /* 选中背景色 */
      color: #ffffff; /* 选中文字颜色 */
      font-weight: bold; /* 选中文字加粗 */
    }
	}
	.el-menu{
		  background-color: #fff5e9;
		  border-radius: 8px;
		   border-right: none;

	 }
  .el-sub-menu .is-active{
    background-color: #f8c27f;
    color: #fcf9f6;
  }
	 .el-sub-menu, .el-sub-menu__title{
		 background-color: #fff5e9;
		 border-radius: 8px 8px 8px 8px;
		 
	 }
  .el-sub-menu :hover{
    background-color: #ffdbb3;
    border-radius: 8px;
    border-right: none;
  }
	.main1:hover{
    background-color: #5de876;
  }
</style>